<template>
  <h5>WareHouse System</h5>
<el-menu
    :default-active="activeMenu"
    class="side-menu"
    router
  >
    <template v-for="route in routes" :key="route.path">
      <!-- 有子菜单的情况 -->
      <template v-if="route.children && route.children.length">
        <el-sub-menu :index="route.path">
          <template #title>
            <el-icon><component :is="route.meta?.icon" /></el-icon>
            <span>{{ route.meta?.title }}</span>
          </template>
          <el-menu-item 
            v-for="child in route.children"
            :key="child.path"
            :index="route.path + '/' + child.path"
          >
            {{ child.meta?.title }}
          </el-menu-item>
        </el-sub-menu>
      </template>
      
      <!-- 没有子菜单的情况 -->
      <template v-else>
        <el-menu-item :index="route.path">
          <el-icon><component :is="route.meta?.icon" /></el-icon>
          <span>{{ route.meta?.title }}</span>
        </el-menu-item>
      </template>
    </template>
  </el-menu>


  <!-- <h5>WareHouse System</h5>
    <el-menu
        :router="true"     
        :default-active="route.path"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
      >
        <el-sub-menu>
          <template #title>
            <el-icon><location /></el-icon>
            <span>工作台</span>
          </template>
            <el-menu-item index="/workspace/itemOne">item one</el-menu-item>
            <el-menu-item index="/workspace/itemTwo">item two</el-menu-item>
            <el-menu-item index="/workspace/itemThree">item three</el-menu-item>
            <el-menu-item index="/workspace/itemFour">item four</el-menu-item>
        </el-sub-menu>
        <el-menu-item index="/dashboard">
          <el-icon><icon-menu /></el-icon>
          <span>数据面板</span>
        </el-menu-item>
        <el-menu-item index="/products">
          <el-icon><document /></el-icon>
          <span>商品中心</span>
        </el-menu-item>
        <el-menu-item index="/recycle">
          <el-icon><setting /></el-icon>
          <span>回收站</span>
        </el-menu-item>
      </el-menu> -->
  </template>
  
  <script lang="ts" setup>
import { onMounted,computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()
const routes = router.options.routes[0].children
const activeMenu = computed(() => route.path)
  </script>
<style lang="scss" scoped>
h5{
  text-align: center;
  padding: 10px;
  font-size: 20px;
  
  color:rgb(168, 210, 247);
  box-sizing: border-box;
}
.el-menu{
  border-right:none;

}
</style>